<template>
	<view>
		<view class="card" v-for="(item,index) in sentences" :key="index" v-show="index===currentIndex">
			<view class="card-content">
				<image :src="item.imgfile.url" mode="widthFix"></image>
				<view class="word word-top">
					
					<text class="sentence-left">
						{{item.sentence.split(item.word)[0]}}_ _ _ {{item.sentence.split(item.word)[1]}}
					</text>
				</view> 
				<view :class="['word word-select',selectVal && op.word==selectVal && isRight ?'success':selectVal && !isRight && op.word==selectVal?'error':'']"  :key="n" v-for="(op,n) in item.options"  @click="selectAns(op,item)">
					<text style="margin-right: 6px;">{{sorts[n]}}.</text>{{op.word}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const pageDataCenter=uniCloud.importObject('page-data-center')
	export default {
		data() {
			return {
				sorts:['A','B','C','D'],
				sentences:[],
				sentence_left:'',
				sentence_right:'',
				values:[],
				currentIndex:0,
				isRight:null,
				selectVal:'',
				id:'',
				progress:'',
				share: {
					title: '词汇小课堂',
					imageUrl: 'https://mp-e3fbd118-dad0-4878-b40b-44597e7aa0eb.cdn.bspapp.com/cloudstorage/2a9a20de-8e3c-4800-b520-646eeaf2133f.png',
					desc: '单词学习打打卡',
					content: '我今天学习了新单词，你也一起来呀'
				}
			}
		},
		watch:{
			progress(val){
				val && uni.setNavigationBarTitle({
					title:this.currentIndex+'/'+this.sentences.length
				})
			}
		},
		onLoad(e) {
			this.type=parseInt(e.type) || 5
			e.id && this.getData(e.id)
		},
		methods: {
			getData(id){
				this.id=id
				pageDataCenter.getChapterFillSentence(id,this.type).then((res)=>{
					console.log(res)
					this.sentences=res.data
					uni.setNavigationBarTitle({
						title:'1/'+res.data.length
					})
				})
			},
			selectAns(op,item){
				this.isRight=op.word==item.word?true:false
				this.selectVal=op.word
				console.log(this.isRight,this.selectVal)
				this.isRight && setTimeout(()=>{
					this.currentIndex++
					this.selectVal=''
					this.progress = `${(this.currentIndex/this.sentences.length)*100}%`
					this.currentIndex == this.sentences.length && this.submitProgress()
					}, 500)
				},
				submitProgress(redirectTo=1) {
					pageDataCenter.submitProgress({
						chapter_id:this.id,
						progress: this.progress
					},'add').then((res) => {
						console.log('submitProgress',res)
						redirectTo && uni.redirectTo({
							url:'/pages/finish/finish?id='+this.id+`&count=${this.sentences.length}`
						})
					})
				},
		},
		onUnload() {
			this.submitProgress(0)
		},
		onShareAppMessage(res) {
				//实现根据不同页面返回不同的转发信息
				let pages = getCurrentPages();
				let routerUrl = pages[0].route //获取当前页的路径
				return {
					title: this.share.title,
					path: '/' + routerUrl, // 路径前面必须要加'/'
					imageUrl: this.share.imageUrl,
					desc: this.share.desc,
					content: this.share.content,
					success(res) {
						uni.showToast({
							title: '分享成功'
						})
					},
					fail(res) {
						uni.showToast({
							title: '分享失败',
							icon: 'none'
						})
					}
				}
			}
	}
</script>

<style scoped>
	page,.page{
		background-color: #e3ebee;
	}
	.card{
		padding: 20px;
		text-align: center;
		background-color: #fff;
		font-size: 16px;
		margin: 40px auto;
		border: 1px solid #eee;
		border-radius: 8px;
		width: 90%;
	}
	.card-content image{
		width: 100%;
		border-radius: 6px;
	}
	.word-inputs{
		display: flex;
		margin: 0 auto;
		justify-content: center;
	}
	.input-item{
		width: 20px;
		border-bottom: 3px dashed #333;
		height: 24px;
	}
	.word-top{
		font-size: 20px;
		margin-bottom: 20px;
		font-weight: 700;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.word-select{
		color: #333;
		padding: 10px;
		text-align: center;
		border: 1px solid #eee;
		border-radius: 8px;
		box-shadow: 0px 0px 1px rgba(0, 0, 0, .1);
		margin: 15px auto;
	}
	.success{
		border-color: #00cb62;
		background-color: #8bcb96;
	}
	.error{
		border-color: #ee0b0b;
		background-color: #cb9394;
	}
</style>
